import React from 'react';
import { GlobalStyle } from './style.js'
import { Provider } from 'react-redux'
import Header from './conmon/Header/index.js'
import store from './store/index'
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import Home from './pages/home'
import Detail from './pages/detail/loadable'
import Login from './pages/login'
import write from './pages/write'

function App () {
  return (
    <div >
      <GlobalStyle />
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Header />
            <Switch>

              <Route path="/" exact component={Home}></Route>

              <Route path="/detail/:id" component={Detail}></Route>
              <Route path="/login" component={Login} />
              <Route path="/write" component={write} />
              <Redirect to="/login" />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    </div>
  );
}

export default App;
